html,
body {
  --bgColor: linear-gradient(to right, #7BC6CC, #BE93C5);
  --color: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
  width: 100%;
  height: 100%;
  margin: 0;
}

#contenner {
  width: 100%;
  height: 100%;
  background: var(--bgColor);
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}

.card-box {
  width: 100%;
  max-width: 310px;
  height: 500px;
  /* 景深 */
  perspective: 900px;
}

.card {
  height: 100%;
  /* 开启3D */
  transform-style: preserve-3d;
  position: relative;
  transition: all .8s ease;
}

#hf {
  position: absolute;
  left: 50%;
  top: 5%;
}

.card-box:hover .card {
  transform: rotateY(180deg);
}

.card div {
  height: 100%;
  position: absolute;
  border-radius: 30px;
  box-shadow: 4px 10px 40px 0px rgb(14, 13, 13);
  background-color: #fff;
  text-align: center;
  font-family: cursive;
  backface-visibility: hidden;
}

.front,
.back {
  width: 100%;
}

/* 正面 */
.front {
  z-index: 1;
  transform: rotateY(180deg);
  position: relative;
}

.front p {
  text-align: left;
  text-indent: 2em;
}

.front button{
  position: absolute;
  bottom: 10%;
  left: 45%;
}

/* 背面 */
.back {
  background-image: var(--color);
  z-index: 2;
  transform: rotateY(0deg);
}

.turnCard {
  width: 30%;
  max-width: 310px;
  border-radius: 30px;
  overflow: hidden;
}